var nav = {
  types: [],
  typeId: '',
  typeName: '',
  index: 0,
  timer: null,
  time: 500,
  bgs: ['#9ac7ff', '#f9c5a0', '#b6ee81', '#ffaaaf', '#dea3fd', '#ff71b3'],
  init: function () {
    if (!this.typeId) return
    this.renderBgAndTilte()
    this.getData()
  },
  _defaultBg: '',
  // getDetail: function () {
  //   try {
  //     var data = getTypeDetailInfo(this.typeId)[0]
  //     var pictrue = data.typePicture[0].picPath10
  //   } catch (error) {
  //     console.log('classify getData error')      
  //   }
  // },
  renderBgAndTilte: function () {
    var data = getTypeDetailInfo(this.typeId)[0]
    page.data.detail = data
    var pictures = data.typePicture[0]
    if (pictures.picPath3) {
      $('#main').css('background-image', 'url(' + pictures.picPath3 + ')')
    }
    if (pictures.picPath10) {
      $('#title').html('<img src="' + pictures.picPath10 + '" />')
    } else if (this.typeName) {
      $('#title').html(this.typeName)
    }
    // this.typeName && $('#title').html(this.typeName)
  },
  getData: function () {
    var data = getTypeListByTypeId({ TYPEID: this.typeId })
    page.data.nav = this.types = data.TYPEs
    this.renderNav()
    this.renderList()
  },
  renderNav: function () {
    var navHtml = ''
    if (page.data.detail.typePicture[0] && page.data.detail.typePicture[0].picPath11) {
      this._defaultBg = page.data.detail.typePicture[0].picPath11
    }
    // var bg = 
    for (var i = 0, l = this.types.length; i < l; i++) {
      var type = this.types[i]
      var style = 'background:url(' + this._defaultBg + ") repeat;"
      navHtml += '<div id="nav-' + i + '" class="item nav-item" style="' + style + '">' + type.typeName + '</div>'
    }
    $('#nav-container').html(navHtml)
  },
  renderList: function (pageSize) {
    // list.loading = true
    this.scrollNav()
    list.number = 9
    list.page = pageSize ? pageSize : 1
    list.elId = 'list'
    list.typeId = this.types[this.index].typeId
    list.getData()
    // if (this.timer){
    //   clearTimeout(this.timer)
    // }
    // this.timer = setTimeout(function () {
    //   list.getData()
    // }, this.time)
  },
  scrollNav: function () {
    var $dom = $('#nav .item').eq(this.index)
    $('#nav .item').css({
      'background': 'url(' + this._defaultBg + ') repeat'
    })
    var view = 8
    var h = 70
    var container = $('#nav-container')
    var len = this.types.length
    var middle = Math.floor(view / 2)
    if (this.index < middle) {
      container.css('top', 0)
    } else if ( len - this.index < middle ) {
      container.css('top', -(len - view) * h)
    } else {
      container.css('top', -(this.index - middle) * h)
    }
    utils.toggleClass($dom[0], 'active')

    $dom.css({
      'background': this.bgs[this.index % this.bgs.length]
    })
  }
}